<template>
  <div class="mddCon">
    <el-row class="top">
      <el-col class="focusImg">
        <img :src="focusInfo.imgUrl" alt="" />
      </el-col>
      <el-col class="focusCon" :span="20" :push="2">
        <el-col :span="8" class="fcLeft">
          <div class="fcTitle">Don't fear the unknown</div>
          <div class="focusForm">
            <el-input placeholder="我想去"></el-input
            ><el-button type="warning" icon="el-icon-search"></el-button>
          </div>
          <div class="wz">
            <a href="#">杭州</a>
            <a href="#">日本</a>
            <a href="#">澳门</a>
            <a href="#">新加坡</a>
            <a href="#">清迈</a>
          </div>
        </el-col>
        <el-col :span="12" :push="2" class="fcRight">
          <h1>{{ focusInfo.title }}</h1>
          <p>{{ focusInfo.text }}</p>
        </el-col>
      </el-col>
    </el-row>

    <el-col class="crend-title">
      <h1>热门目的地</h1>
    </el-col>
    <el-col :span="14" :push="5">
      <el-tabs v-model="activeName" @tab-click="handleClick" stretch>
        <el-tab-pane
          v-for="(item, index) in hotmddList"
          :label="item.navbarTitle"
          :name="index + ''"
          :key="index"
        >
          <mddSite :provinces="item.provinces"></mddSite>
        </el-tab-pane>
      </el-tabs>
    </el-col>

    <el-col class="crend-title">
      <h1>当季推荐</h1>
    </el-col>

    <el-col :span="16" :push="4">
      <el-tabs v-model="activeName2" @tab-click="handleClick2" stretch>
        <el-tab-pane
          v-for="(item1, index1) in seasonRecommendList"
          :label="item1.navbarTitle"
          :name="index1 + ''"
          :key="index1"
        >
          <mdd-rec :seasonmdds="item1.seasonmdds"></mdd-rec>
        </el-tab-pane>
      </el-tabs>
    </el-col>

    <el-col class="crend-title">
      <h1>主题精选</h1>
    </el-col>
    <el-col :span="8" :push="8">
      <el-tabs v-model="activeName3" @tab-click="handleClick3" stretch>
        <el-tab-pane
          v-for="(item2, index2) in catemddList"
          :key="index2"
          :label="item2.navbarTitle"
          :name="index2 + ''"
        >
          <mdd-zt-imgs :catemdds="item2.catemdds"></mdd-zt-imgs>
        </el-tab-pane>
      </el-tabs>
    </el-col>

    <el-col class="qqMdd" :span="18" :push="3">
      <h2>全球目的地</h2>
      <span>(按拼音字母排序)</span>
      <el-link type="warning" icon="el-icon-plus"> 添加目的地 </el-link>
    </el-col>
    <el-col :span="18" :push="3" class="qqMddCon">
      <mdd-qq-list
        v-for="(item3, index3) in qqmddList"
        :key="index3"
        :qqmddList="item3"
      ></mdd-qq-list>
    </el-col>
  </div>
</template>
<script>
import SwiperMdd from "components/Swiper/swiperImg.vue";
import mddSite from "components/mdd/mdd_site.vue";
import mddView from "components/mdd/mdd_view.vue";
import mddRec from "components/mdd/mdd_recommend.vue";
import mddZtImgs from "components/mdd/mdd_ztImg.vue";
import mddQqList from "components/mdd/mdd_qqList";
import api from "@/api/mdd";

export default {
  data() {
    return {
      focusInfo: [],
      hotmddList: [],
      seasonRecommendList: [],
      catemddList: [],
      qqmddList: [],
      activeName: "0",
      activeName2: "0",
      activeName3: "0",
    };
  },
  components: {
    SwiperMdd,
    mddSite,
    mddView,
    mddRec,
    mddZtImgs,
    mddQqList,
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleClick2(tab, event) {
      console.log(tab.name, event);
      api.getSeasonRecommendInfo(tab.name).then((res) => {
        console.log(res.data);
        this.listImg = res.data;
      });
    },
    handleClick3(tab, event) {
      console.log(tab, event);
    },
  },
  created() {
    api.getFocusInfo().then((res) => {
      this.focusInfo = res.focusInfo;
    });
    api.getHotmddInfo().then((res) => {
      this.hotmddList = res.hotmddList;
    });
    api.getSeasonRecommendInfo().then((res) => {
      this.seasonRecommendList = res.seasonRecommendList;
    });
    api.getCatemddInfo().then((res) => {
      this.catemddList = res.catemddList;
    });
    api.getQqmddInfo().then((res) => {
      this.qqmddList = res.qqmddList;
    });
  },
};
</script>
<style lang="scss" scoped>
.mddCon {
  display: flex;
  flex-direction: column;
  margin-top: -70px;
  .top {
    min-height: 300px;
  }
  .focusImg {
    z-index: -1;
    position: relative;
    max-height: 700px;
    overflow: hidden;
    img {
      width: 100%;
    }
  }
  .focusCon {
    position: absolute;
    color: #fff;
    display: flex;
    align-items: center;
    top: 50%;
    transform: translateY(-50%);
    .fcLeft {
      padding: 15px;
      background-color: rgba($color: #000000, $alpha: 0.5);
      border-radius: 10px;
      .fcTitle {
        font-size: 24px;
      }
      .focusForm {
        display: flex;
        padding: 8px 0;
        /deep/ .el-button {
          padding: 0;
          margin-left: 5px;
          font-size: 24px;
        }
        /deep/ .el-button--warning {
          background-color: #ff9d00;
          border-color: #ff9d00;
        }
        button {
          width: 45px;
        }
      }
      .wz {
        a {
          color: #fff;
          padding-right: 10px;
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
    .fcRight {
      h1 {
        font-size: 30px;
        cursor: pointer;
        padding-bottom: 8px;
        &:hover {
          color: #ff9d00;
        }
      }
      p {
        font-size: 16px;
        line-height: 28px;
      }
    }
  }
  .qqMdd {
    display: flex;
    align-items: flex-end;
    color: #666;
    max-width: 1000px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 30px;
    h2 {
      font-size: 32px;
      font-weight: normal;
    }
    span {
      font-size: 14px;
      padding: 0 10px;
      padding-right: 20px;
    }
  }
  .qqMddCon {
    max-width: 1000px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    color: #666;
  }
  .crend-title {
    text-align: center;
    padding: 18px 10px;
  }
  /deep/ .el-tabs__header {
    margin: 0;
  }
  /deep/ .el-tabs__nav-wrap::after {
    background-color: #fff;
  }
  /deep/ .el-tabs__active-bar {
    background-color: #ff9d00;
  }
  /deep/ .el-tabs__item.is-active,
  /deep/ .el-tabs__item:hover {
    color: #ff9d00;
  }
  /deep/ .el-tabs__content {
    width: 1000px;
    transform: translateX(-50%);
    left: 50%;
  }
  /deep/ .el-backtop {
    color: #ff9d00;
  }
  /deep/ .el-backtop:hover {
    background-color: #fff9ef;
  }
}
</style>